<template>
  <view class="page">
    <view class="background"></view>
    <view class="orderManage">
      <view class="orderManage-header flex">
        <view class="avator"></view>
        <view class="orderManage-header-title flex">
          <text class="name">微信用户</text>
          <text class="status">未认证</text>
        </view>
      </view>
      <view class="orderManage-main flex-between">
        <view
          v-for="(value, index) in data"
          :key="index"
          class="manage-item flex-between"
        >
          <text class="num">{{ value.num }}</text>
          <text class="name">{{ value.name }}</text>
        </view>
      </view>
    </view>
    <view class="orderManage-footer">
      <view
        class="lter flex-between"
        v-for="(item, index) in manData"
        :key="index"
        @click="handleClick(item, index)"
      >
        <view class="lter-left-item flex">
          <image :src="item.url" mode="widthFix" class="icon"></image>
          <text style="font-size: 32rpx">{{ item.name }}</text>
        </view>
        <up-icon name="arrow-right"></up-icon>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from "vue";
const data = reactive([
  {
    num: 0,
    name: "租期内的订单",
  },
  {
    num: 0,
    name: "待安装",
  },
  {
    num: 0,
    name: "待签约",
  },
  {
    num: 0,
    name: "售后维修",
  },
  {
    num: 0,
    name: "退款",
  },
]);
const manData = reactive([
  {
    url: "/static/icon/order.png",
    name: "我的订单",
  },
  {
    url: "/static/icon/auth.png",
    name: "实名认证",
  },
  {
    url: "/static/icon/address.png",
    name: "我的地址本",
  },
  {
    url: "/static/icon/service.png",
    name: "联系客服",
  },
  {
    url: "/static/icon/exclusive.png",
    name: "我的服务订单",
  },
]);

const handleClick = (item: any, index: any) => {
  switch (index) {
    case 0:
      uni.navigateTo({
        url: "/subPackages/myOrder/index",
      });
      break;
    case 1:
      uni.navigateTo({
        url: "/subPackages/auth/index",
      });
      break;
    case 2:
      uni.navigateTo({
        url: "/subPackages/addressbook/index",
      });
      break;
  }
};
</script>

<style lang="scss" scoped>
.background {
  height: 450rpx;
  background-color: #9a1e23;
}
.orderManage {
  margin-top: -240rpx;
  padding: 0 30rpx;
}
.orderManage-header {
  gap: 20rpx;
  align-items: center;
  margin: 0 auto;
  padding-left: 30rpx;
  .avator {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background-color: #cccccc;
  }
  .orderManage-header-title {
    height: 100rpx;
    flex-direction: column;
    justify-content: space-around;
    color: #ffffff;
    .name {
      font-size: 32rpx;
    }
  }
}
.orderManage-main {
  margin: 30rpx auto;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 50rpx 30rpx;
  justify-content: space-around;

  .manage-item {
    flex-direction: column;
    align-items: center;
    gap: 10rpx;
    .num {
      font-size: 35rpx;
    }
    .name {
      font-size: 25rpx;
    }
  }
}
.orderManage-footer {
  background-color: #fff;
  .lter {
    width: 90%;
    margin: 0 auto;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.37);
    .lter-left-item {
      flex: 1;
      padding: 30rpx 0;
      align-items: center;
      gap: 20rpx;
      .icon {
        width: 40rpx;
        height: 40rpx;
      }
    }
    &:last-child {
      border-bottom: none;
    }
  }
}
</style>
